<template>
	<tm-app v-if="showPage" ref="app" color="#F9F9FA">
		<z-header :detail="storeInfo" />

		<view class="pt-24 bg-F9F9FA sticky t-0 zIndex-10">
			<tm-tabs
				:list="tabsTitle"
				v-model:active-name="tabIdx"
				align="center"
				:width="750"
				:height="300"
				default-name="1"
				itemModel="line"
				showTabsLine
				showTabsLineAni
				activeColor="red"
				activeFontColor="red"
			></tm-tabs>
		</view>

		<block v-if="tabIdx == '1'">
			<view class="search-box mx-24 mt-24" @click="HGotoList('')">
				<image
					class="w-64 h-64"
					src="@/static/tabbar/tab1/seatch-icon.png"
					mode=""
				></image>
				<view
					class="mx-8 w-2 h-14"
					style="background-color: #d9d9d9"
				></view>
				<text class="flex1 text-E1E1E1 fs-22">搜索推荐</text>
				<!-- <view class="flex1 px-24">
					<input
						class="w-full fs-28"
						type="text"
						v-model="serachKey"
						placeholder="商品关键字"
					/>
				</view> -->
				<view class="w-42 h-42 br-200 bg-D9D9D9 fd-r jc-c">
					<tm-icon
						:font-size="24"
						name="tmicon-arrow-right"
						color="white"
						@click="HGetGoodList(true)"
					></tm-icon>
				</view>
			</view>

			<block v-for="item in goodList" :key="item.id">
				<view class="z-card p-24 fd-r" @click="HGotoDetail(item)">
					<image
						class="w-160 h-200"
						:src="item.mainImg"
						mode=""
					></image>

					<view class="flex1 pl-16">
						<view class="">
							<text class="fs-28 fw-b">
								{{ item.goodsTitle }}
							</text>
						</view>
						<view class="fd-r pt-12">
							<text class="fs-24 c-red">￥</text>
							<text class="fs-32 c-red">
								{{ item.goodsPrice }}
							</text>
						</view>
					</view>
				</view>
			</block>

			<view class="py-32 fd-r jc-c">
				<text class="fs-24 c-grey">没有了~</text>
			</view>
		</block>

		<block v-if="tabIdx == '2'">
			<view class="px-24">
				<block v-for="item in storeGoodTypeTree" :key="item.id">
					<view class="type-box">
						<view
							class="fd-r py-12"
							@click="HGotoList(item.goodsCategoryCode)"
						>
							<text class="flex1 fs-28">
								{{ item.goodsCategoryName }}
							</text>
							<tm-icon
								:font-size="24"
								name="tmicon-angle-right"
								color="grey"
							></tm-icon>
						</view>
						<view class="fd-r jc-sb fw-w">
							<block v-for="tag in item.children" :key="tag.id">
								<view
									class="tag"
									@click="HGotoList(tag.goodsCategoryCode)"
								>
									<text class="fs-26 text-align-center">
										{{ tag.goodsCategoryName }}
									</text>
								</view>
							</block>
						</view>
					</view>
				</block>
			</view>
		</block>
	</tm-app>

	<tm-skeleton v-else></tm-skeleton>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import ZShopCart from '@/component/z-shop-cart/z-shop-cart.vue';
import ZHeader from './z-header.vue';
import ZCard from './z-card.vue';

const showPage = ref(false);
const tabsTitle = ref([
	{ title: '商品', key: '1' },
	{ title: '分类', key: '2' }
]);
const tabIdx = ref(0);
const HGotoTab = (idx) => {
	tabIdx.value = idx;
};

// 店内分类
import { storeToRefs } from 'pinia';
import { useStoreGoodTypeStore } from '@/store/storeGoogType.js';
const storeGoodTypeStore = useStoreGoodTypeStore();
const { storeGoodTypeTree, typeId } = storeToRefs(storeGoodTypeStore);
const typeShow = ref(false);
const HShowType = () => {
	typeShow.value = true;
};

let storeId;
const serachKey = ref('');
// import goodApi from '@/api/goodApi.js';
const pageSize = 10;
const goodList = ref([]); // 右侧商品列表数据
const HGetGoodList = (refresh) => {
	const len = goodList.value.length;
	const pageNum = refresh ? 1 : Math.ceil(len / pageSize) + 1;
	// console.log('leftList', leftList.value);
	const params = {
		pageNum,
		pageSize,
		shopId: storeId,
		search: serachKey.value
	};
	console.log('params', params);
	goodApi.getGoodsByChannelCategory(params).then((res) => {
		const arr = res.data.list.map((v) => {
			v.mainImg = JSON.parse(v.goodsPicture)?.pictures[0];
			return v;
		});

		goodList.value = refresh ? arr : [...goodList.value, ...arr];

		showPage.value = true;
	});
};

// import storeApi from '@/api/storeApi.js';
const storeInfo = ref({});
const getStore = () => {
	storeApi.detail(storeId).then((res) => {
		storeInfo.value = res.data;
		uni.setNavigationBarTitle({
			title: res.data.shopName
		});
	});
};
onLoad(({ id }) => {
	storeId = id;
	getStore();
	storeGoodTypeStore.HGetTree(id);
	HGetGoodList(true);
});

const HGotoDetail = (item) => {
	uni.navigateTo({ url: `/pages/zone1/goods/index?id=${item.id}` });
};

const HGotoList = (code) => {
	uni.navigateTo({
		url: `/pages/zone1/store/goods/index?id=${storeId}&name=${storeInfo.value.shopName}&code=${code}`
	});
};
</script>

<style lang="scss" scoped>
.search-box {
	padding-right: 14rpx;
	height: 66rpx;
	border-radius: 33rpx;
	background-color: white;
	display: flex;
	align-items: center;
}

.type-box {
	margin-top: 16rpx;
	padding: 0 24rpx;
	border-radius: 16rpx;
	border: 1rpx solid $c-grey;
}

.tag {
	width: 320rpx;
	padding: 0 16rpx;
	height: 48rpx;
	line-height: 48rpx;
	border-radius: 24rpx;
	background-color: #e0e0e0;
	margin-bottom: 16rpx;
	display: flex;
	justify-content: center;
}
</style>
